<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>骨医快线</title>
		<link rel="stylesheet" href="../../css/mui.plus.css" />
		<link href="../../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
	</head>
	<body>
		<span id="toMainBtn" style="position: absolute;right: 20px;top: 20px;color: #999;">跳过</span>
		<div class="mui-content oe-login">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>姓名</label>
					<input id="nameIpt" type="text" class="mui-input-clear oe-tar" placeholder="请填写">
				</div>
				<div class="mui-input-row">
					<label class="oe-label-pick">医院</label>
					<button id="showHosBtn" type="button" class="mui-btn oe-btn-pick">请选择</button>
				</div>
				<div class="mui-input-row">
					<label class="oe-label-pick">职称</label>
					<button id="showPostBtn" type="button" class="mui-btn oe-btn-pick">请选择</button>
				</div>
				
				<div class="mui-input-row" style="margin-top: 20px;">
					<label class="oe-label-pick">胸牌/职业认证</label>
					<button id="pickPhotoBtn" type="button" class="mui-btn oe-btn-pick">请选择</button>
				</div>
				
    			<button id="approveBtn" type="button" class="mui-btn mui-btn-primary oe-btn-block" style="margin-top: 20px;">立即认证</button>
			</form>
			
		</div>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/lib/moxie.js"></script>
		<script src="../../js/lib/plupload.dev.js"></script>
		<script src="../../js/lib/qiniu.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../data/city.data.js"></script>
		<script type="text/javascript">
			(function($, doc){
				var login = app.login;
				var userInfo = {};
				var uploadFlag = 0;
				var nameIpt = document.getElementById("nameIpt");
				
				$.ready(function(){
					//普通示例
					var userPicker = new $.PopPicker(),
						hosPicker  = new $.PopPicker(),
 					 	cityPicker = new $.PopPicker({layer: 3});
 					var qnOp1 = {},qnOp2 = {
 						browse_button : 'pickPhotoBtn', //必选参数,打开文件管理器的触发器 
 						uptoken : 'ArjlNfgX9rDSZl1wMrr3PEyFG7O6v7OK9N1UGilS:9NRsiB5adL07-KcxqGThr8B4Gs4=:eyJzY29wZSI6Im9ydGhzcHJvZCIsImRlYWRsaW5lIjoxNDk2ODM4NTQ2fQ==', // uptoken 是上传凭证，由其他程序生成
 						unique_names : true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
 						domain : '7xus80.com2.z0.glb.qiniucdn.com',     // bucket 域名，下载资源时用到，**必需**
 						auto_start: true, 
 						init : {
					        'FilesAdded': function(up, files) {
					            plupload.each(files, function(file) {
					            // 文件添加进队列后,处理相关的事情
					            });
					        },
					        'BeforeUpload': function(up, file) {
					            // 每个文件上传前,处理相关的事情
					        },
					        'UploadProgress': function(up, file) {
				                // 每个文件上传时,处理相关的事情
				                uploadFlag = 1;
					            document.getElementById("pickPhotoBtn").innerHTML = '上传中...';
					        },
					        'FileUploaded': function(up, file, info) {
					            // 每个文件上传成功后,处理相关的事情
					        	document.getElementById("pickPhotoBtn").innerHTML = '上传成功';
					        	userInfo.picWork = (JSON.parse(info)).key;
					        },
					        'Error': function(up, err, errTip) {
					               //上传出错时,处理相关的事情
					        },
					        'UploadComplete': function() {
					               //队列文件处理完毕后,处理相关的事情
					               uploadFlag = 0;
					        },
					        'Key': function(up, file) {
					            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					            // 该配置必须要在 unique_names: false , save_key: false 时才生效
								
					            var key = "";
					            // do something with key here
					            return key
					        }
	    
 						}
 					};
 					
 					Qiniu.uploader(qnOp2);
					
					// 初始化职位列表
					userPicker.setData([{
						value: 'dr1',
						text: '主任医师'
					}, {
						value: 'dr2',
						text: '副主任医师'
					}, {
						value: 'dr3',
						text: '主治医师'
					}, {
						value: 'dr4',
						text: '住院医师'
					}]);
					
					// 初始化城市列表
					cityPicker.setData(cityData);
					
					function tellAll(){
						var pages = plus.webview.all();
						for(var i in pages){
							$.fire(pages[i], 'start', null);
						}
					};
					
					$('.mui-content').on('tap', '#showPostBtn' ,function(){
						userPicker.show(function(items) {
							document.getElementById("showPostBtn").innerHTML = userInfo.post = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					});
					
					// 
					$('.mui-content').on('tap', '#showHosBtn', function(){
						cityPicker.show(function(items) {
							
							var data = {
								hos_province : items[0].text,
								hos_city : items[1].text,
								hos_district : items[2].text
							};
							
							app.net.get('c_hospital/get_all_list', data, function(data){
								if(data){
									var hosArray = [];
									var hosData = data.data || {};
									for(var i in hosData){
										var item = {
											value : hosData[i].hos_id,
											text  : hosData[i].hos_name
										};
										hosArray.push(item);
									}
									hosPicker.setData(hosArray);
									hosPicker.show(function(items){
										document.getElementById("showHosBtn").innerHTML = userInfo.hos = items[0].text;
									});
								}
							},'json');
						});
					})
					
					
					// 跳过按钮
					$('body').on('tap', '#toMainBtn', function(){
						tellAll();
						$.openWindow({
							id: 'main',
							show: {
								aniShow: 'zoom-out'
							}
						});
					});	
					
					$.plusReady(function(){
						// 监测职业认证按钮
						$('.mui-content').on('tap', '#approveBtn', function(){
							userInfo.name = nameIpt.value;
							
							login.approve(userInfo,function(err){
								// 由于只有在上传成功后才能获取到图片的信息，因此需要在此处阻塞
								if(!userInfo.picWork && uploadFlag === 1){
									plus.nativeUI.toast('图片上传中，请稍候');
									return;
								}
								if(err){
									plus.nativeUI.toast(err);
									return;
								}
								$.openWindow({
									id : 'main',
									show : {
										aniShow : 'zoom-out'
									}
								});
							});
						});
					});
					
				});
				
			}(mui, document));
		</script>
	</body>
</html>
